<div ng-controller="ipController">
<!-- contain BEGIN -->
    <div class="right-product right-full">
        <div class="center-back right-back">
            <div class="container-fluid">
                <div class="info-center">
                    <div class="page-header">
                        <div class="pull-left">
                            <h4>IP规则列表</h4>
                        </div>
                    </div>

                    <div class="search-box row">
                        <div class="col-md-1">
                            <button type="button" class="btn btn-default" ng-click="newlyAdded($event)" data-toggle="modal" data-target="#newlyAdded">
                                <span class="glyphicon glyphicon-plus"></span> 新增
                            </button>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="table-margin">
                        <table class="table table-bordered table-header">
                            <thead>
                                <tr>
                                    <td class="w10 text-center">IP规则ID</td>
                                    <td class="w10 text-center">规则名称</td>
                                    <td class="w10 text-center">优先级</td>
                                    <td class="w10 text-center">规则模式</td>
                                    <td class="w10 text-center">IP表达式</td>
                                    <td class="w10 text-center">是否启用</td>
                                    <td class="w10 text-center">操作</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="val in tabVal">
                                    <td class="text-center">{{ val.ipRuleId }}</td>
                                    <td class="text-center">{{ val.ruleName }}</td>
                                    <td class="text-center">{{ val.sortIndex }}</td>
                                    <td class="text-center">{{ val.ruleMode }}</td>
                                    <td class="text-center">{{ val.expression }}</td>
                                    <td class="text-center">{{ val.enabled }}</td>
                                    
                                    <td class="text-center icon-td">
                                        <i class="icon-details" ng-click="details($event, $index)" data-toggle="modal" data-target="#details"></i>
                                        <i class="icon-edit"    ng-click="edit($event, $index)"    data-toggle="modal" data-target="#edit"></i>
                                        <i class="icon-delete"  ng-click="delete($event, $index)"  data-toggle="modal" data-target="#delete"></i>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="12">
                                        <div class="pull-right">
                                            <nav>
                                                <tm-pagination conf="paginationConf"></tm-pagination>
                                            </nav>
                                        </div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- contain END -->

<!-- 新增 BEGIN -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="newlyAdded">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">新增IP规则</h4></div>
                <div class="modal-body">
                	
                    <form name="ipRulesAdd_form" novalidate>
                        <div class="form-group">
	                            <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">规则名称：</label>
	                            <div class="col-xs-12 col-sm-9">
	                                <input type="text" ng-class="test" 
	                                	name="ruleName"
	                                	ng-minlength="2" 
	                                	ng-maxlength="20"  
	                                	class="form-control" 
	                                	ng-model="details_ipRulesName" 
	                                	required />
	                                <label class="red required">*</label>
	                                 <div class="error" ng-show="ipRulesAdd_form.ruleName.$dirty && ipRulesAdd_form.ruleName.$invalid">
									    <small class="error" ng-show="ipRulesAdd_form.ruleName.$error.required">请输入规则名</small>
									    <small class="error" ng-show="ipRulesAdd_form.ruleName.$error.minlength ">规则名长度在2-20之间</small>
									    <small class="error" ng-show=" ipRulesAdd_form.ruleName.$error.maxlength">规则名长度在2-20之间</small>
		 							 </div>
	                            </div>       
                        </div>
                  
                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">优先级：</label>   
                            <div class="col-xs-12 col-sm-9">
                                <select ng-model="details_sortIndex" 
                                        class="form-control"  
                                        ng-init="details_sortIndex='1'"
                                        >
                                    <option value="1">高</option>
                                    <option value="2">中</option>
                                    <option value="3">低</option>
                                </select>
                   
                            </div>
                          </div>  
                          <div class="form-group height-auto">
                              <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">规则模式：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select ng-model="details_ruleMode" 
                                        class="form-control"  
                                        ng-init="details_ruleMode='0'"
                                        >
                                    <option value="0">拒绝</option>
                                    <option value="1">允许</option>
                                </select>
                   
                            </div>
                           </div>
                           <div class="form-group">
	                            <label class="col-xs-12 col-sm-3 control-label text-right">IP表达式：</label>
	                            <div class="col-xs-12 col-sm-9">
	                                <input type="number" 
	                                	   name="expression"
	                                	   ng-minlength="2" 
	                                	   ng-maxlength="11"
	                                	   autocomplete="off" 
	                                	   class="form-control" 
	                                	   ng-model="details_expression"
	                                	   ng-pattern="/^1[3,5,8]\d{9}$/"
	                                	   required 
                                           />
	                                <label class="red required">*</label>
	                                 <div class="error" ng-show="ipRulesAdd_form.expression.$dirty && ipRulesAdd_form.expression.$invalid">
									    <small class="error" ng-show="ipRulesAdd_form.expression.$error.pattern">请输入IP表达式</small>
									    <small class="error" ng-show="ipRulesAdd_form.expression.$error.required">IP表达式不能为空</small>
									    <small class="error" ng-show="ipRulesAdd_form.expression.$error.minlength ">IP表达式长度在1-11之间</small>
									    <small class="error" ng-show="ipRulesAdd_form.expression.$error.maxlength">IP表达式长度在1-11之间</small>
		 							 </div>
	                            </div>       
                        </div>

                            
                        <div class="form-group height-auto">
                          <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">是否启用：</label>
                          <div class="col-xs-12 col-sm-9">
                                <select ng-model="details_enabled" 
                                        class="form-control"  
                                        ng-init="details_enabled='1'"
                                        >
                                    <option value="1">启用</option>
                                    <option value="0">不启用</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" ng-disabled="userAdd_form.$invalid"  ng-click="confirmNewlyAdded()">确定</button>
                    </div>
                    <p class="col-xs-12 col-sm-9">IP表达式说明</p>
                    <p class="col-xs-12 col-sm-9">1.xxx.xxx.xxx.xxx（一个确定的IP地址）。</p>
                    <p class="col-xs-12 col-sm-9">2.使用‘|’隔开每个子表达式。</p>
                    <p class="col-xs-12 col-sm-9">3.IP段设置。例如‘10.1’表示所有以‘10.1’开头的IP地址，如10.1.1.0和10.1.0.1而不是10.12.1.1。</p>
                    <p class="col-xs-12 col-sm-9">4.使用‘-’来设置一个IP范围，例如‘222.111-222.113'，比如包括222.111.0.1，222.112.02，...，222.113.0.254</p>
                    <p class="col-xs-12 col-sm-9">5.使用’!‘来排除IP地址。例如’!222.111-222.113'，比如不包括'222.111.0.1,222.113.0.254。</p>
                    <p class="col-xs-12 col-sm-9">6.使用‘*’来包含所有的IP地址。</p>
                    <p class="col-xs-12 col-sm-9">7.使用‘!*'来排除所有的IP地址。</p>
                    <p class="col-xs-12 col-sm-9">8.’xxx.xxx'等同于'xxx.xxx.'等同于'xxx.xxx.*'</p>

       			</div>
            </div>
               
        </div>
    </div>
<!-- 新增 END -->

<!-- 详情 BEGIN -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="details">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">IP规则详细信息</h4></div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 control-label text-right">IP规则ID：</label>
                    <div class="col-xs-12 col-sm-9">
                        <input type="text" name="ipRuleId" class="form-control" ng-model="details_ipRuleId" disabled /></div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 control-label text-right">规则名称：</label>
                    <div class="col-xs-12 col-sm-9">
                        <input type="text" name="ruleName" class="form-control" ng-model="details_ruleName" disabled /></div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 control-label text-right">优先级：</label>
                    <div class="col-xs-12 col-sm-9">
                        <input type="text" name="sortIndex" class="form-control" ng-model="details_sortIndex" disabled /></div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 control-label text-right">规则模式：</label>
                    <div class="col-xs-12 col-sm-9">
                        <input type="text" name="ruleMode" class="form-control" ng-model="details_ruleMode" disabled /></div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 control-label text-right">IP表达式：</label>
                    <div class="col-xs-12 col-sm-9">
                        <textarea rows="5" type="text" name="expression" class="form-control" ng-model="details_expression"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 control-label text-right">是否启用：</label>
                    <div class="col-xs-12 col-sm-9">
                        <input type="text" name="enabled" class="form-control" ng-model="details_enabled" disabled /></div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 control-label text-right">绑定用户：</label>
                    <div class="col-xs-12 col-sm-9">
                        <input type="text" name="userName" class="form-control" ng-model="details_userName" disabled /></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回列表</button></div>
            </div>
        </div>
    </div>
</div>
<!-- 详情 END -->

<!-- 修改 BEGIN -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="edit">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <p>&nbsp;</p>
                    <h4 class="modal-title" id="myModalLabel">修改IP规则</h4></div>
                <div class="modal-body">
                    <form name="ipRulesUpdate_form" novalidate>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">规则名称：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                       name="ruleName" 
                                       ng-minlength="2" 
                                       ng-maxlength="20" 
                                       class="form-control" 
                                       ng-model="details_ipRulesName" 
                                       required 
                                       />
                                <label class="red required">*</label>
                                <div class="error" ng-show="ipRulesUpdate_form.ruleName.$dirty && ipRulesUpdate_form.ruleName.$invalid">
                                    <small class="error" ng-show="ipRulesUpdate_form.ruleName.$error.required">请输入IP表达式</small>
                                    <small class="error" ng-show="ipRulesUpdate_form.ruleName.$error.minlength ">请输入正确的IP表达式，规则如下</small>
                                </div>
                            </div>
                        </div>
                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">优先级：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select ng-model="details_sortIndex"
                                        ng-options="priority.id as priority.name for priority in which_priority"
                                        >
                                </select>
                            </div>
                        </div>
                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right">规则模式：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select 
                                    ng-model="details_ruleMode"
                                    ng-options="ruleMode.id as ruleMode.name for ruleMode in which_ruleMode"
                                    >
                                </select>
                            </div>
                        </div>
                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right">IP表达式：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                       name="expression" 
                                       class="form-control" 
                                       ng-model="details_expression" 
                                       />
                                <label class="red required">*</label>
                            </div>
                            <!-- <div class="error" ng-show="ipRulesAdd_form.expression.$dirty && ipRulesAdd_form.expression.$invalid">
                                <small class="error" ng-show="ipRulesAdd_form.expression.$error.required">请输入IP表达式</small>
                                <small class="error" ng-show="ipRulesAdd_form.expression.$error.minlength ">请输入正确的IP表达式，规则如下</small>
                            </div> -->
                        </div>
                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right">是否启用：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select ng-model="details_enabled"
                                        ng-options="enabled.id as enabled.name for enabled in which_enabled"
                                >
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="userUpdate_form.$invalid" ng-click="confirmEdit($event)">修改</button>
                </div>
            </div>
        </div>
    </div>
<!-- 修改 END -->

<!-- 删除 BEGIN -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="delete">
        <div class="modal-dialog delete-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center">删除警告</h4></div>
                <div class="modal-body text-center">请确认是否删除该行IP规则</div>
                <div class="modal-footer">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary pull-left confirm-del-btn" ng-click="confirmDel()" data-dismiss="modal">确定</button></div>
                </div>
            </div>
        </div>
    </div>
<!-- 删除 END -->
</div>